
<template>
  <div ref="ganttContainer"></div>
</template>
 
<script>
/* eslint-disable */
import moment from 'moment'; // moment格式化时间
import {gantt} from 'dhtmlx-gantt';
export default {
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], links: []}
      }
    }
  },
 
  mounted: function () {
      gantt.config.date_format = "%Y-%m-%d";     
      /*
      * 冒烟：fcca02    单元：fec0dc     回归：62ddd4   阶段：d1a6ff
      * */
      //设置图表区域的日期坐标最大值 var date = new Date(dateString.replace(/-/,"/"))
      //  gantt.config.start_date = new Date("2020-04-08".replace(/-/,"/")) ;
      //gantt.config.end_date = new Date("2020-04-18".replace(/-/,"/")) ; //结束时间需要+1天

      //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
      gantt.config.autosize = true
      // 甘特图图表宽度自适应
      gantt.config.autofit = true
      //只读模式
      gantt.config.readonly = true
      //是否显示左侧树表格
      gantt.config.show_grid = true
      //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
      gantt.config.fit_tasks = true
      //甘特图右侧表头的高度
      gantt.config.scale_height = 50;
      gantt.config.row_height = 50;
      //使用中文
      gantt.i18n.setLocale("cn");
      //表格列设置
      gantt.config.columns = [
        { name: 'text', label: '频率名称', tree: true, width: '120' },
        // {
        //   name: 'duration', label: '时长', align: 'center', template: function(obj) {
        //     return obj.duration + '天'
        //   }
        // }
        /*{name:"start_date", label:"开始时间", align: "center" },
        {name:"end_date",   label:"结束时间",   align: "center" },*/
      ]
      //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
      gantt.config.show_task_cells = true

      gantt.config.grid_column_width = '10'
      // several scales at once
      gantt.config.scales = [
          {unit: "month", step: 1, format: "%F, %Y"},
          {unit: "week", step: 1},
          {unit: "day", step:1, format: "%D" }
      ];

      //设置x轴日期
      gantt.config.scale_unit = 'day'
      gantt.config.step = 1
      gantt.config.date_scale = '%m-%d'
      // 在时间线上增加一行显示星期
      gantt.config.subscales = [
        // {unit:"day",  step:1, date:"星期"+"%D" },
        { unit: 'hour', step: 6, date: '%H' }
      ]

      // 开启marker插件 
      gantt.plugins({ marker: true, tooltip: true }); 
      var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
      var today = new Date();
      // 添加固定时间线
      var todayMarker = gantt.addMarker({
        start_date: today,
        css: 'today',
        text: '当前:' + moment(today).format('YYYY-MM-DD HH:mm:ss'),
        title: 'Today: '
      });
      setInterval(function(){
        var today = gantt.getMarker(todayMarker);
        today.start_date = new Date();
        today.title = 'Today: ';
        today.text = '当前:' + moment(today.start_date).format('YYYY-MM-DD HH:mm:ss'),
        gantt.updateMarker(todayMarker);
      }, 1000);

      //悬浮提示框
      gantt.templates.tooltip_text = function(start, end, task) {
        //return "<b>任务名称:</b> "+task.text+"<br/><b>时长:</b> " + task.duration+"<br/><b>说明:</b>" +task.toolTipsTxt;
        return '<span style=\'font-size: 14px\'>' + task.text + '</span>'
      }
      // 提示框内容
      gantt.templates.tooltip_text = function(start, end, task){
        return '<span style=\'font-size: 14px\'><b>'+ task.text + '</b></span>'+
        "<br/><b>计划开始:</b> " + task.planStart +
        "<br/><b>计划结束:</b> " + task.planEnd +
        "<br/><b>实际开始:</b> " + moment(task.start_date).format('YYYY-MM-DD HH:mm')+
        "<br/><b>实际结束:</b> " + moment(task.end_date).format('YYYY-MM-DD HH:mm')+
        '<br/><b>持续时间:</b> ' + task.duration +'h' 
      };

      //工期计算的基本单位 hour
      gantt.config.duration_unit = 'hour'
      gantt.config.duration_step = 1; //工期计算的倍数
      gantt.config.work_time = false; // 允许在工作时间而不是日历时间计算任务的持续时间


      gantt.templates.task_text = function (start, end, task) {
        return task.duration +'h';
      };


      // gantt.templates.scale_cell_class = function(date) {
      //   if(date.getDay()== 0 || date.getDay()== 6){
      //     return "weekend";
      //   }
      //   // return 'weekend'
      // }
      //任务栏周末亮色
      /*gantt.templates.task_cell_class = function(item,date){
        if(date.getDay()== 0 || date.getDay()== 6){
          return "weekend";
        }
      };*/

      //任务条上的文字大小 以及取消border自带样式
      gantt.templates.task_class = function(start, end, task) {
        return task.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
      }

 

    gantt.init(this.$refs.ganttContainer);
    gantt.parse(this.$props.tasks);
  }
}
</script>
 
<style>
  @import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
  .weekend {background:#f4f7f4; }
  .gantt_selected .weekend {background:#f7eb91;}
  .firstLevelTask {border: 2px solid #5cba1a; background: #5cba1a;}
  .secondLevelTask {border: 2px solid #299cb4; background: #299cb4;}
</style>